<template>
  <div>
    <div class="couponTop">
      <div style="display:flex">
        <el-button type="primary" @click="issueGood">发布积分商品</el-button>
        <set-drop
          setName="批量删除"
          :dropdownList="mallDropdownCoupList"
          @setClick="setClick"
          @command="command"
          style="margin-left:20px"
        />
      </div>
      <SelectCom @changeSel="changeSel" style="margin-left:280px"></SelectCom>
      <div class="couponTop__left">
        <el-input
          class="filter__right--input"
          v-model="searchText"
          @keyup.enter.native="searchBy"
          clearable
          style="width: 320px;"
          placeholder="输入关键词"
        >
          <el-select v-model="searchVal" placeholder="搜索条件" slot="prepend" style="width:100px">
            <el-option
              v-for="item in searchtList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="searchBy"></el-button>
        </el-input>
      </div>
    </div>
    <ShopList
      ref="shopList"
      @getTotal="getTotal"
      :searchObj="searchObj"
      style="padding-bottom: 30px"
    ></ShopList>
    <div class="couponBottom">
      <set-drop
        setName="批量删除"
        :dropdownList="mallDropdownCoupList"
        @setClick="setClick"
        @command="command"
        style="margin-left:20px"
      />
      <PageManage
        :pageSize="searchObj.pageSize"
        :pageNum="searchObj.pageNum"
        :total="searchObj.total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></PageManage>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import SelectCom from "../components/SelectCom.vue";
import DrapDowm from "../components/DrapDowm.vue";
import SetDrop from "@/views/customer/common/SetDrop.vue";
import ShopList from "./ShopList.vue";
import PageManage from "@/components/PageManage.vue";
import { delIntegralGoods, upDownIntegralGoods } from "@/api/integral/integral";

@Component({
  components: {
    SelectCom,
    DrapDowm,
    PageManage,
    ShopList,
    SetDrop,
  },
})
export default class ProductList extends Vue {
  @Ref()
  readonly shopList: HTMLFormElement;


  name = "ProductList";

  /** 选择多个小区 */
  idList = [];

  searchObj = {
    /** 分页条数 */
    pageSize: 10,
    /** 分页页码 */
    pageNum: 1,
    /** 数据长度 */
    total: 0,
    /** 商品状态 */
    status: "",
    /** 商品名称 */
    integralGoodName: "",
    /** 商品货号 */
    productSn: "",
  };

  /** 选中搜索条件 */
  searchVal = "1";

  /** 搜索内容 */
  searchText = "";

  /** 不同条件搜索 */
  searchtList = [
    {
      value: "1",
      label: "商品名称",
    },
    {
      value: "2",
      label: "商品ID",
    },
  ];

  get mallDropdownCoupList() {
    return [
      {
        text: "批量上架",
        command: "1",
        show: true,
      },
      {
        text: "批量下架",
        command: "2",
        show: true,
      },
    ];
  }

  /** 获得总数 */
  getTotal(total) {
    this.searchObj.total = total;
  }

  /**
   * 顶部状态筛选
   */
  changeSel(e) {
    switch (e) {
      case "0":
        this.searchObj.status = "";
        break;
      case "1":
      case "2":
        this.searchObj.status = e === "1" ? "1" : "0";
        break;
    }
    this.shopList.getList();
  }

  /**
   * 搜索功能
   */
  searchBy() {
    if (this.searchVal === "") {
      this.$message.error("请选择搜索类型");
      return;
    }
    if (this.searchVal === "1") {
      this.searchObj.integralGoodName = this.searchText;
      this.searchObj.productSn = "";
    } else {
      this.searchObj.integralGoodName = "";
      this.searchObj.productSn = this.searchText;
    }
    this.shopList.getList();
  }

  /**
   * 发布积分商品
   */
  issueGood() {
    this.$router.push({ name: "IssueGoodAdd" });
  }

  setClick() {
    this.dealDelete();
  }

  /**
   * 下拉框选择
   */
  command(e) {
    const list = (this.$refs.shopList as any).$refs.product.getCheckedItem();
    const idList = (this.idList = []);
    list.forEach(item => {
      idList.push(item.id);
    });
    if (idList.length === 0) {
      this.$message.error("请先选择商品");
      return;
    }
    switch (e) {
      case "1":
      case "2":
        this.$confirm(`确定${e === "2" ? "下架" : "上架"}选中商品？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          upDownIntegralGoods(e === "2" ? 0 : 1, idList).then(res => {
            if (res.code === 200) {
              this.$message.success(`商品已${e === "2" ? "下架" : "上架"}`);
              this.shopList.getList();
            }
          });
        });
        break;
      case "3":
        this.$confirm(`确定删除选中商品？删除后无法恢复`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          delIntegralGoods(idList.join(","), {}).then(res => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.shopList.getList();
            }
          });
        });
        break;
    }
  }

  /**
   * 商城模式下的批量删除
   */
  dealDelete() {
    this.command("3");
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.searchObj.pageSize = val;
    this.shopList.getList();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.searchObj.pageNum = val;
    this.shopList.getList();
  }
}
</script>

<style lang="scss" scoped>
@include b(couponTop) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  @include e(left) {
    display: flex;
  }
}

.couponBottom {
  // display: -webkit-box;
  // justify-content: space-between;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 10px;
  width: 980px !important;
  background-color: white;
  padding-bottom: 10px;
  z-index: 10;
}

.search {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-left: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
